<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./lib/layui-v2.5.5/css/layui.css"
	media="all">
<link rel="stylesheet" href="./css/public.css" media="all">
<style type="text/css">
.layui-table img {
	max-height: 100px;
	max-width: 100px;
}
 .layui-table-cell{
      display:table-cell;
      vertical-align: middle;
  } 
</style>
</head>
<body>
	<div class="layuimini-container">
		<div class="layuimini-main">

			<fieldset class="table-search-fieldset">
				<legend>商品查询</legend>
				<div style="margin: 10px 10px 10px 10px">
					<!-- <form class="layui-form layui-form-pane" action="">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">订单状态</label>
									<div class="layui-input-inline">
										<input type="number" name="of_status" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
								</div>
							</div>
						</form> -->
					<div class="layui-form-item" style="margin-top: 20px;"
						onsubmit="false">
						<label class="layui-form-label">商品查询</label>
						<div class="layui-input-inline" style="width: 120px;">
							<input type="text" name="proName" id="proName"
								class="layui-input">
						</div>
						
						<label class="layui-form-label">商品状态</label>
							<div class="layui-input-inline" style="width: 120px;">
							<select name="startPro" id="startPro"   class="layui-input"      lay-verify="" lay-search>
								<option value="">请输入状态</option>
								<option value="1">上架</option>
								<option value="2">下架</option>
							</select>
							</div>
						<button class="layui-btn layui-btn-primary" id="search"
							data-type="reload">
							<i class="layui-icon"></i> 搜 索
						</button>
					</div>
				</div>
			</fieldset>

			<script type="text/html" id="toolbarDemo">
					<div class="layui-btn-container">
						<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
						<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
					</div>
				</script>
           <script type="text/html" id="switchTpl">
  					<input type="checkbox" name="startPro" value="{{d.proID}}" lay-skin="switch" lay-text="上架|下架" lay-filter="statusDemo" {{ d.startPro == 1 ? 'checked' : '' }}>
		</script>
			<table class="layui-hide" id="currentTableId"
				lay-filter="currentTableFilter"></table>

			<script type="text/html" id="currentTableBar">
                 <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="product">图片查看</a>
					<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">详情</a>
	          <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edits">修改</a>
					<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
				</script>

		</div>
	</div>
	<script src="../houtai/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
	<script>
		layui
				.use(
						[ 'form', 'table' ],
						function() {
							var $ = layui.jquery, form = layui.form, table = layui.table;

							table
									.render({
										elem : '#currentTableId',
										url : '../houtai/getproduct',
										where : {
											method : 'getproduct',
											proName : '',
											startPro:''
											
										},
										method : 'POST',
										toolbar : '#toolbarDemo',
										defaultToolbar : [ 'filter', 'exports',
												'print', {
													title : '提示',
													layEvent : 'LAYTABLE_TIPS',
													icon : 'layui-icon-tips'
												} ],
										cols : [ [
												{
													type : "checkbox",
													width : 50
												},
												{
													field : 'proID',
													width : 80,
													title : 'id'
												},
												{
													field : 'proName',
													width : 140,
													title : '商品名称'
												},
												
												{
													field : 'className',
													width : 140,
													title : '商品分类'
												},
												{
													field : 'price',
													width : 140,
													title : '售价'
												},
												{
													field : 'brand',
													width : 140,
													title : '品牌'
												},
												{
													field : 'description',
													width : 100,
													title : '描述'
												},
												{
													field : 'freeShipping',
													width : 140,
													title : '是否包邮'
												},
												{
													field : 'sales',
													width : 140,
													title : '销量'
												},
												{
													field : 'place',
													width : 140,
													title : '产地'
												},
												{
													field : 'time',
													width : 140,
													title : '生产时间'
												},
												{
													field : 'materials',
													width : 140,
													title : '材料'
												},
												{
													field : 'picture',
													templet : "<div><img src='{{d.picture}}' style='width: 520px; height:280px;'/></div>",
													width : 240,
													title : '主图'
												},
												{
													field : 'startPro',												
													width : 80,
													templet: '#switchTpl',
													title : '状态'
												},
												{
													title : '操作',
													Width : 30,
													toolbar : '#currentTableBar',
													align : "center"
												} ] ],
										limits : [ 10, 15, 20, 25, 50, 100 ],
										limit : 15,
										page : true,
										skin : 'line',
										id : 'testReload'
									});

							 $('#search').on('click', function() {
								var proName = $("#proName").val();
								var startPro = $("#startPro").val();
								table.reload('testReload', {//testReload,是上面渲染表格的id
									where : {//接口需要的两个请求参数
										'proName' : proName,
										'startPro' : startPro
									}
								});
							});

							
							form.on('switch(statusDemo)', function(data) {
					              var startPro = this.checked ? 1 : 2;
					              var proID = this.value;
					              $.ajax({
					                url :  '/wk1un10/houtai/Proedit',
					                type : "get",
					                data : {
					                	startPro:startPro,
					                	proID : proID
					                },
					                success : function(d) {
					                
					                    layer.msg("操作成功");
					                 
					                }
					              })
					            });
							
							
							
							table.on('checkbox(currentTableFilter)', function(obj) {
								console.log(obj)
							});
							
							
							table.on('toolbar(currentTableFilter)', function(
									obj) {
								if (obj.event === 'add') { // 监听添加操作
									var index = layer.open({
										title : '添加用户',
										type : 2,
										shade : 0.2,
										maxmin : true,
										shadeClose : true,
										area : [ '100%', '100%' ],
										content : 'ProductAdd.jsp',
									});
									$(window).on("resize", function() {
										layer.full(index);
									});
								} // else if(obj.event === 'delete') { // 监听删除操作
								/* var checkStatus = table.checkStatus('currentTableId'),
									data = checkStatus.data;
								layer.alert(JSON.stringify(data)); */
								/* layer.confirm('真的删除行么', function(index) {//删除弹框
									console.log('执行删除');
									console.log(obj.data);
									var url = '../houtai/deleteProclass';
									$.post(url, {
										"catID" : obj.data.catID,
										method : 'deleteProclass'
									}, function(data) {
										console.log(data);
										if (data.count > 0) {
											console.log('删除成功');
											window.location.reload();
										}
									}, "json");
								});
								}  */
							});

							//监听表格复选框选择
							table.on('checkbox(currentTableFilter)', function(
									obj) {
								console.log(obj)
							});

							table.on('tool(currentTableFilter)', function(obj) {
								var data = obj.data;
								if (obj.event === 'edit') {

									var index = layer.open({
										title : '商品详情',
										type : 2,
										shade : 0.2,
										maxmin : true,
										shadeClose : true,
										area : [ '100%', '100%' ],
										content : 'ProductXiangQing.jsp',
										success : function(layero, index) {
											var body = layer.getChildFrame(
													'body', index);
											body.contents().find("#proID").val(
													obj.data.proID);
											body.contents().find("#proName")
													.val(obj.data.proName);
											body.contents().find("#categories")
													.val(obj.data.categories);
											body.contents().find("#price").val(
													obj.data.price);
											body.contents().find("#brand").val(
													obj.data.brand);
											body.contents()
													.find("#description")
													.val(obj.data.description);
											body.contents().find(
													"#freeShipping").val(
													obj.data.freeShipping);
											body.contents().find("#sales").val(
													obj.data.sales);
											body.contents().find("#place").val(
													obj.data.place);
											body.contents().find("#time").val(
													obj.data.time);
											body.contents().find("#materials")
													.val(obj.data.materials);
											body.contents().find("#picture")
													.val(obj.data.picture);

										}
									});
									$(window).on("resize", function() {
										layer.full(index);
									});
									return false;
								}else if (obj.event === 'product') {

									var index = layer.open({
										title : '图片查看',
										type : 2,
										shade : 0.2,
										maxmin : true,
										shadeClose : true,
										area : [ '80%', '80%' ],
										content : 'Propicinfo.jsp',
										success : function(layero, index) {
											var body = layer.getChildFrame('body', index);
											body.contents().find("#proID").val(obj.data.proID);
											
										},
										end:function(){
											window.location.reload();
										}
									});
									$(window).on("resize", function() {
										layer.full(index);
									});
									return false;
								}  else if (obj.event === 'edits') {

									var index = layer.open({
										title : '编辑',
										type : 2,
										shade : 0.2,
										maxmin : true,
										shadeClose : true,
										area : [ '100%', '100%' ],
										content : 'productUpdate.jsp',
										success : function(layero, index) {
											var body = layer.getChildFrame(
													'body', index);
											body.contents().find("#proID").val(
													obj.data.proID);
											body.contents().find("#proName")
													.val(obj.data.proName);
											body.contents().find("#categories")
													.val(obj.data.categories);
											body.contents().find("#price").val(
													obj.data.price);
											body.contents().find("#brand").val(
													obj.data.brand);
											body.contents()
													.find("#description")
													.val(obj.data.description);
											body.contents().find(
													"#freeShipping").val(
													obj.data.freeShipping);
											body.contents().find("#sales").val(
													obj.data.sales);
											body.contents().find("#place").val(
													obj.data.place);
											body.contents().find("#time").val(
													obj.data.time);
											body.contents().find("#materials")
													.val(obj.data.materials);
											body.contents().find("#picture")
													.val(obj.data.picture);
											body.contents().find("#startPro")
											.val(obj.data.startPro);
										}
									});
									$(window).on("resize", function() {
										layer.full(index);
									});
									return false;
								}     else if (obj.event === 'delete') {
									layer.confirm('真的删除行么', function(index) {
										/* obj.del();
										layer.close(index); */
										console.log('执行删除');
										console.log(obj.data);
										var url = '../houtai/deleteProc';
										$.post(url, {
											"proID" : obj.data.proID,
											method : 'deleteProc'
										}, function(data) {
											console.log(data);
											if (data.count > 0) {
												console.log('删除成功');
												window.location.reload();
											}
										}, "json");
									});	}																													
								
							});

						});
	</script>

</body>
</html>